<template>
  <!-- <h2>{{ filmname }}</h2>
  {{ type }}
  <img :src="wordCloud" /> -->
  <div class="center">
    <!-- <div class="center" :style="{backgroundImage:'url('+ picture +')',backgroundSize:'cover',fliter:'blur(150px)'}"> -->
    <div class="card">
      <div class="additional">
        <div class="user-card">
          <!-- <div class="level center">Level {{ userinfo.level }}</div> -->
          <img :src="picture" />
          <p class="filmname0">{{ filmname }}</p>
          <!-- <div class="points center">{{ filmname }}</div> -->
        </div>
        <div class="more-info">
          <img :src="wordCloud"  />
          <!-- <h1>{{filmname}}</h1>
					<div class="coords">
						<span>制片国家/地区</span>
						<span>{{area}}</span>
					</div>
					<div class="coords">
						<span>片长</span>
						<span>{{filmL}}</span>
					</div> -->
          <!-- <div class="stats">
						<div>
							<div class="title">歌曲</div>
							<i class="fa fa-trophy"></i>
							<div class="value">{{userinfo.music}}</div>
						</div>
						<div>
							<div class="title">专辑</div>
							<i class="fa fa-gamepad"></i>
							<div class="value">{{userinfo.album}}</div>
						</div>
						<div>
							<div class="title">视频</div>
							<i class="fa fa-group"></i>
							<div class="value">{{userinfo.video}}</div>
						</div>
						<div>
							<div class="title">其他</div>
							<i class="fa fa-coffee"></i>
							<div class="value infinity">{{ userinfo.other }}</div>
						</div>
					</div> -->
        </div>
      </div>
      <div class="general">
        <!-- <h1>{{ filmname }}</h1> -->
        <h1>类型：{{ type }}</h1>
        <p>导演：{{ director }}</p>
        <p>编剧：{{ scriptwriter }}</p>
        <p>演员：{{ star }}</p>
        <p>制片国家/地区：{{ area }}</p>
        <p>片长：{{ filmL }}</p>
        <!-- <span class="more">将鼠标放在卡片上查看更多信息</span> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filmname: this.$route.query.filmname,
      picture: this.$route.query.picture,
      director: this.$route.query.director,
      scriptwriter: this.$route.query.scriptwriter,
      star: this.$route.query.star,
      type: this.$route.query.type,
      area: this.$route.query.area,
      showDate: this.$route.query.showDate,
      filmL: this.$route.query.filmL,
      wordCloud: this.$route.query.wordCloud,
    };
  },
};
</script>
<style scoped lang="scss">
@import url("https://fonts.googleapis.com/css?family=Abel");

.center {
  font-family: Abel, Arial, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 40px;
  // background-color: rgba(16 18 27 / 10%);
  background: url("/public/bg002.jpg");
  background-size: cover;

  .card {
    width: 600px;
    height: 500px;
    background: #fff linear-gradient(#f8f8f8, #fff);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin: 1.5rem;

    .additional {
      position: absolute;
      width: 200px;
      height: 100%;
      // background: linear-gradient(#de685e, #ee786e);
      background: linear-gradient(#5e9ade, #6686cc);
      transition: width 0.4s;
      overflow: hidden;
      z-index: 2;

      .user-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 100%;
        float: left;

        .filmname0 {
          // background-color: antiquewhite;
          width: 100%;
          height: 60px;
          margin-left: 50px;
          text-align: center;
          overflow: hidden;
          margin-top: 240px;
          color: #fff;
          font-size: 20px;
          font-family: Abel, Arial, Verdana, sans-serif;
        }

        .level,
        .points {
          color: #fff;
          width: 60%;
          text-transform: uppercase;
          font-size: 0.75em;
          font-weight: bold;
          background: rgba(0, 0, 0, 0.15);
          padding: 0.125rem 0.75rem;
          border-radius: 100px;
          white-space: nowrap;
        }

        img {
          width: 160px;
          height: 200px;
          border-radius: 5%;
          // margin: 20% 0;
          float: left;
          position: absolute;
          left: 20px;
          margin-top: -50px;
        }
      }
      .user-card::after {
        content: "";
        display: block;
        position: absolute;
        top: 10%;
        right: -2px;
        height: 80%;
        border-left: 2px solid rgba(0, 0, 0, 0.025);
      }

      .more-info {
        background-color: #fff;
        width: 350px;
        float: left;
        position: absolute;
        left: 200px;
        height: 100%;

        img {
          width: 115%;
          height: 100%;
          float: left;
          position: absolute;
          left: 0px;
        }
        h1 {
          color: #fff;
          margin-bottom: 0;
          text-align: center;
        }

        .coords {
          margin: 0 1rem;
          color: #fff;
          font-size: 1rem;

          span + span {
            float: right;
          }
        }

        .stats {
          font-size: 2rem;
          display: flex;
          position: absolute;
          bottom: 1rem;
          left: 1rem;
          right: 1rem;
          top: auto;
          color: #fff;

          i {
            display: block;
          }

          div.title {
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
          }

          div.value {
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 1.5rem;
          }

          div.value.infinity {
            font-size: 1.5rem;
          }
        }
        .stats > div {
          flex: 1;
          text-align: center;
        }
      }
    }

    .general {
      width: 350px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      box-sizing: border-box;
      padding: 1rem;
      padding-top: 0;

      h1 {
        // text-align: center;
        margin-top: 100px;
        font-size: 16px;
        font-weight: 400;
      }

      .more {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        font-size: 0.9em;
      }
    }
  }

  .card:hover {
    .additional {
      width: 100%;
      border-radius: 0 5px 5px 0;
    }
  }
}
</style>